<template>
  <div v-loading="loading" class="page flex-col">
    <img
      class="image_1"
      referrerpolicy="no-referrer"
      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea1be415a0f71e56da4d26aaa37c36a3c1225ed813f5ca736f12c859753978ab"
    >
    <div class="group_1 flex-col justify-end">
      <div class="group_2 flex-row">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng163d217657b24753cb09e5ebc876c8df1626f33bd49c4e0f28890f3489e2b890"
        >
        <span class="text_1">到期时间：2024-10-24</span>
        <span class="text_2">深圳市辰汉珠宝有限公司，陈总</span>
        <img
          class="label_1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25ae01c7cb44769431fc5310eedc3bfe6b2cbf86a752c3f5e12f80a5c0928ab2"
        >
      </div>
      <div class="group_3 flex-row justify-between">
        <div class="block_1 flex-col">
          <div class="box_1 flex-row">
            <div class="text-wrapper_1 flex-col">
              <span class="text_3">T</span>
            </div>
            <span class="text_4">文生图</span>
          </div>
          <div class="box_2 flex-row justify-between">
            <img
              class="thumbnail_1"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng78bce6d9c73ece501cb35d08507d9fcfea8d7ba269fab57cd19ac4b1e1f952d2"
            >
            <span class="text_5">图生图</span>
          </div>
          <div class="box_3 flex-row justify-between">
            <img
              class="thumbnail_2"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng693c352095bcc5d18cad54c600dd3f2edac3de98ada3f706db1b4b68679d377f"
            >
            <span class="text_6">线稿出图</span>
          </div>
          <div class="box_4 flex-row justify-between">
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd5a2340d1eef942e453275e7219bbd829673363e4b20fd10149c551b1904dd56"
            >
            <span class="text_7">局部重绘</span>
          </div>
          <div class="box_5 flex-row" style="cursor:pointer;">
            <div class="image-text_1 flex-row justify-between">
              <img
                class="thumbnail_4"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga976a4c565758ff0803535d9766608f4a62a47deac27559fa00fc27d888d4146"
              >
              <span class="text-group_1">训练投喂</span>
            </div>
          </div>
          <div class="box_6 flex-row" style="cursor:pointer;">
            <div class="image-text_2 flex-row justify-between">
              <img
                class="thumbnail_5"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng27e52f7a49250f7b74a81fac9ac6676054c31cdf31b5676e529a5a9782634008"
              >
              <span class="text-group_2">系统设置</span>
            </div>
          </div>
        </div>
        <div class="block_2 flex-col">
          <div class="box_7 flex-col">

            <div v-if="false" class="group_4 flex-row">
              <div class="block_3 flex-col justify-between">
                <img
                  class="image_3"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga1135803d206ddbdd2eac4762362e142783c3fd35e7567b8bed286a19ad35719"
                >
                <span class="text_8">2K</span>
                <div class="section_1 flex-col" style="z-index:2">
                  <div class="block_4 flex-col">
                    <span class="text_9">发送到</span>
                    <img
                      class="image_4"
                      referrerpolicy="no-referrer"

                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng07b1c35b55df4a905c5e0ae5b772baa2401495ccf0559466eef9c7f5e613d971"
                    >
                    <div class="text-wrapper_2 flex-col">
                      <span class="text_10">以图生图</span>
                    </div>
                    <span class="text_11">局部重绘</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="group_5 flex-row" style='margin-top:150px;'>
               <div class="box_8 flex-col justify-between">
                 <div class="box_9 flex-row">
                   <div class="section_2 flex-col"></div>
                 </div>
                 <div class="box_10 flex-row justify-between">
                   <div class="group_6 flex-col"></div>
                   <div class="group_7 flex-col"></div>
                 </div>
                 <div class="box_11 flex-col">
                   <div class="group_8 flex-col">
                     <div class="block_5 flex-col"></div>
                   </div>
                 </div>
               </div>
             </div> -->
            <viv hmode="center" vmode="center" style="width:100%;height:100%;">
              <img v-if='imgres' style='cursor: pointer;' @click='dialogVisible=true' :src="imgres">
			  <hiv v-else hmode='center' vmode='center' style='width: 400px;height:400px;background-color: #333;font-size:18px;font-weight: bold;color:white'>
				  暂未生成
			  </hiv>
              <vblock length="15px" />
              <div>
                <span class="text_12">生成图片</span>
              </div>
            </viv>

          </div>
          <span class="text_13">深圳市帝俊太一科技有限公司</span>
          <div class="box_12 flex-col" />
        </div>
        <div class="block_6 flex-col">
          <div class="text-wrapper_4 flex-row justify-between">
            <span class="text_14">工作区</span>
            <span class="text_15">历史记录</span>
          </div>
          <img
            class="image_5"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc1077305c3a54295abe69247d02d1d7b2c2db61c4143d96674ecf1747e8776e8"
          >
          <div class="block_7 flex-col" style="position: relative;">
            <!-- <span class="text_16"
              >输入提示词，包括内容主体、风格词，细节描述词、形容修饰词等</span
            > -->
            <el-input v-model="message" style="position: absolute;top:0;left:0;background-color: transparent;" :rows="6" type="textarea" placeholder="输入提示词，包括内容主体、风格词，细节描述词、形容修饰词等" />
            <img
              style="position: absolute;right:20px;bottom:10px;"
              class="label_2"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90e77d7a21753b3e9378c7b160a85733f06e052fe45e741343c52ce3cafb95bb"
              @click="message=&quot;&quot;"
            >
          </div>
          <div class="text-wrapper_5 flex-row justify-between">
            <span class="text_17">类型</span>
            <span class="text_18">查看所有</span>
          </div>
          <div class="block_8 flex-row">
            <div class="box_13 flex-col">
              <div class="text-wrapper_6 flex-col">
                <span class="text_19">戒指</span>
              </div>
            </div>
            <div class="box_14 flex-col">
              <div class="text-wrapper_7 flex-col">
                <span class="text_20">吊坠</span>
              </div>
            </div>
            <div class="box_15 flex-col">
              <div class="text-wrapper_8 flex-col">
                <span class="text_21">手链</span>
              </div>
            </div>
            <div class="box_16 flex-col">
              <div class="text-wrapper_9 flex-col">
                <span class="text_22">耳饰</span>
              </div>
            </div>
          </div>
          <div class="text-wrapper_10 flex-row justify-between">
            <span class="text_23">材质</span>
            <span class="text_24">查看所有</span>
          </div>
          <div class="block_9 flex-row">
            <div class="section_3 flex-col">
              <div class="text-wrapper_11 flex-col">
                <span class="text_25">黄金</span>
              </div>
            </div>
            <div class="section_4 flex-col">
              <div class="text-wrapper_12 flex-col">
                <span class="text_26">18k金</span>
              </div>
            </div>
            <div class="section_5 flex-col">
              <div class="text-wrapper_13 flex-col">
                <span class="text_27">钻石</span>
              </div>
            </div>
            <div class="section_6 flex-col">
              <div class="text-wrapper_14 flex-col">
                <span class="text_28">铂金</span>
              </div>
            </div>
          </div>
          <div class="text-wrapper_15 flex-row justify-between">
            <span class="text_29">纹理</span>
            <span class="text_30">查看所有</span>
          </div>
          <div class="block_10 flex-row">
            <div class="group_9 flex-col">
              <div class="text-wrapper_16 flex-col">
                <span class="text_31">圆形底纹</span>
              </div>
            </div>
            <div class="group_10 flex-col">
              <div class="text-wrapper_17 flex-col">
                <span class="text_32">蜂巢底纹</span>
              </div>
            </div>
            <div class="group_11 flex-col align-center">
              <div class="text-wrapper_18 flex-col">
                <span class="text_33">菱形纹</span>
              </div>
            </div>
            <div class="group_12 flex-col">
              <div class="text-wrapper_19 flex-col">
                <span class="text_34">竖纹</span>
              </div>
            </div>
          </div>
          <div class="text-wrapper_20 flex-row justify-between">
            <span class="text_35">风格</span>
            <span class="text_36">查看所有</span>
          </div>
          <div class="block_11 flex-row">
            <div class="box_17 flex-col">
              <div class="text-wrapper_21 flex-col">
                <span class="text_37">时尚</span>
              </div>
            </div>
            <div class="box_18 flex-col">
              <div class="text-wrapper_22 flex-col">
                <span class="text_38">复古</span>
              </div>
            </div>
            <div class="box_19 flex-col">
              <div class="text-wrapper_23 flex-col">
                <span class="text_39">ins风</span>
              </div>
            </div>
            <div class="box_20 flex-col">
              <div class="text-wrapper_24 flex-col">
                <span class="text_40">卡通风</span>
              </div>
            </div>
          </div>
          <div class="block_12 flex-row justify-between">
            <span class="text_41">生成数量</span>
            <img
              class="image_6"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2057d8a83ae16f6a2004952d82ddd7594d55c1d44573be476e070ad7a4fdc9fb"
            >
            <div class="text-wrapper_25 flex-col">
              <span class="text_42">4</span>
            </div>
          </div>
          <hiv class="block_13 flex-row justify-between">
            <span class="text_43">生成尺寸</span>
            <!--   <div class="box_21 flex-row">
                 <span class="text_44">方图1:1</span>
                 <img
                   class="thumbnail_6"
                   referrerpolicy="no-referrer"
                   src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng763afcfa3a7a409cd2da376ed724bd29b65f0906c55097de38cb1974ab6f6573"
                 />
               </div> -->
            <vblock length="15px" />
            <el-select v-model="value" style="width:77%;" placeholder="请选择">
              <el-option
                label="方图1:1"
                value="0"
              />
              <el-option
                label="宽图4:3"
                value="1"
              />
              <el-option
                label="宽图16:9"
                value="2"
              />
            </el-select>
            <pow />
          </hiv>
          <div class="text-wrapper_26 flex-col" style="cursor:pointer;" @click="generate">
            <span class="text_45">生成</span>
          </div>
        </div>
      </div>
    </div>
	<el-dialog :visible.sync="dialogVisible" top='5vh'>
	  <img width="100%" :src="imgres" alt="">
	</el-dialog>
  </div>
  
</template>
<script>

import axios from 'axios'
axios.defaults.timeout = 90000;
export default {
  data() {
    return {
	dialogVisible:false,
      loading: false,
      constants: {},
      message: '',
      value: '0',
      imgres: null
    }
  },
  created() {
	
  },
  methods: {
    generate() {
      this.loading = true
      var map = {
        '0': {
          width: 512,
          height: 512
        },
        '1': {
          width: 800,
          height: 600
        },
        '2': {
          width: 768,
          height: 432
        }
      }
      
var data ={
        'prompt': this.message,
        'negative_prompt': '',
        'sampler_index': 'DPM++ 2M',
        'seed': -1,
        'steps': 20,
        'cfg_scale': 7,
        ...map[this.value]
      }

      axios.post('http://s1.youi365.com:28080/DMM/BaseServlet?method=api&apiname=1687703436102182325.img', 
			{
				data:data
			},{
			  headers: {
				'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头，确保服务器正确解析 FormData
			  }
			}).then((resp) => {
          this.imgres = 'data:image/jpeg;base64,'+resp.data.images[0]
          this.loading = false
        }).catch((e) => {
          console.log(e)
          this.loading = false
          alert('服务器发生错误')
        })
    }

  }
}
</script>
<style>
  .page {
    background-color: rgba(0, 0, 0, 1);
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .image_1 {
    width: 1548px;
    height: 1032px;
    margin: 24px 0 0 186px;
  }

  .group_1 {
    height: 1080px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng339fbad33198b0cf3bbef2f4da94878b272cfad754af690064a6b850da506d10)
    100% no-repeat;
    background-size: 100% 100%;
    width: 1920px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .group_2 {
    width: 1848px;
    height: 50px;
    margin: 18px 0 0 24px;
  }

  .image_2 {
    width: 200px;
    height: 50px;
  }

  .text_1 {
    background-image: linear-gradient(
      90deg,
      rgba(40, 23, 109, 1) 0,
      rgba(252, 58, 100, 1) 100%
    );
    width: 174px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 14px 0 0 1182px;
  }

  .text_2 {
    width: 224px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    margin: 14px 0 0 16px;
  }

  .label_1 {
    width: 38px;
    height: 38px;
    margin: 6px 0 0 14px;
  }

  .group_3 {
    width: 1868px;
    height: 994px;
    margin: 18px 0 0 24px;
  }

  .block_1 {
    background-color: rgba(26, 26, 26, 1);
    border-radius: 8px 8px 0px 0px;
    width: 314px;
    height: 994px;
    justify-content: flex-center;
  }

  .box_1 {
    background-color: rgba(51, 51, 51, 1);
    border-radius: 8px;
    width: 282px;
    height: 50px;
    margin: 16px 0 0 16px;
  }

  .text-wrapper_1 {
    height: 18px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd5a2340d1eef942e453275e7219bbd829673363e4b20fd10149c551b1904dd56)
    100% no-repeat;
    background-size: 100% 100%;
    width: 18px;
    margin: 16px 0 0 16px;
  }

  .text_3 {
    width: 4px;
    height: 8px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 6px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 8px;
    margin: 1px 0 0 11px;
  }

  .text_4 {
    width: 48px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 14px 192px 0 8px;
  }

  .box_2 {
    width: 74px;
    height: 22px;
    margin: 30px 0 0 32px;
  }

  .thumbnail_1 {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .text_5 {
    width: 48px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .box_3 {
    width: 90px;
    height: 22px;
    margin: 44px 0 0 32px;
  }

  .thumbnail_2 {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .text_6 {
    width: 64px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .box_4 {
    width: 90px;
    height: 22px;
    margin: 44px 0 0 32px;
  }

  .thumbnail_3 {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .text_7 {
    width: 64px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .box_5 {
    width: 282px;
    height: 50px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbd16192b328347c9a4e73ae4c7d450c43a09381abb420177a7e9b6e5b0fa6550)
    100% no-repeat;
    background-size: 100% 100%;
    margin: 622px 0 0 16px;
  }

  .image-text_1 {
    width: 87px;
    height: 22px;
    margin: 14px 0 0 98px;
  }

  .thumbnail_4 {
    width: 16px;
    height: 18px;
    margin-top: 2px;
  }

  .text-group_1 {
    width: 64px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
  }

  .box_6 {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 282px;
    height: 50px;
    margin: 6px 0 16px 16px;
  }

  .image-text_2 {
    width: 87px;
    height: 22px;
    margin: 14px 0 0 98px;
  }

  .thumbnail_5 {
    width: 16px;
    height: 17px;
    margin-top: 2px;
  }

  .text-group_2 {
    width: 64px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
  }

  .block_2 {
    background-color: rgba(26, 26, 26, 1);
    border-radius: 8px 8px 0px 0px;
    width: 1036px;
    height: 994px;
    margin-left: 24px;
    justify-content: flex-center;
  }

  .box_7 {
    background-color: rgba(0, 0, 0, 0.4);
    height: 888px;
    width: 988px;
    margin: 24px 0 0 24px;
  }

  .group_4 {
    width: 50px;
    height: 150px;
    margin: 12px 0 0 926px;
  }

  .block_3 {
    background-color: rgba(51, 51, 51, 1);
    width: 50px;
    height: 150px;
  }

  .image_3 {
    width: 50px;
    height: 50px;
  }

  .text_8 {
    width: 21px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    margin: 14px 0 0 14px;
  }

  .section_1 {
    height: 50px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng979df64e45d58c9cfead8bcdbadc395ab6b6bba3d96916a303ae6ba36548a1da)
    100% no-repeat;
    background-size: 100% 100%;
    margin-top: 14px;
    width: 50px;
  }

  .block_4 {
    width: 143px;
    height: 125px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng158579f9c9e10fd472c484b0e5a86580c77717a841274a408ec847dd0036e788) -1px
    0px no-repeat;
    background-size: 144px 125px;
    margin-left: 45px;
  }

  .text_9 {
    width: 48px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
    margin: 11px 0 0 50px;
  }

  .image_4 {
    width: 134px;
    height: 1px;
    margin: 11px 0 0 8px;
  }

  .text-wrapper_2 {
    background-color: rgba(216, 216, 216, 0.12);
    height: 36px;
    margin-left: 8px;
    width: 134px;
  }

  .text_10 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin: 8px 0 0 39px;
  }

  .text_11 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin: 8px 0 16px 47px;
  }

  .group_5 {
    width: 500px;
    height: 500px;
    margin: 8px 0 0 244px;
  }

  .box_8 {
    height: 500px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng23075e00f8ff6b86244d46c039f266c787bdacd78a90270f5be984b9d770082b)
    100% no-repeat;
    background-size: 100% 100%;
    width: 500px;
    position: relative;
  }

  .box_9 {
    width: 250px;
    height: 250px;
    margin-left: 250px;
  }

  .section_2 {
    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/3e9b7bea0ecc4661a8e84cf2943d4a3c_mergeImage.png);
    width: 250px;
    height: 250px;
  }

  .box_10 {
    width: 500px;
    height: 250px;
  }

  .group_6 {
    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/66ec246dfac64b8abde61da2d38671dc_mergeImage.png);
    width: 250px;
    height: 250px;
  }

  .group_7 {
    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7a35d39dbd1946e6835d1db8b576386a_mergeImage.png);
    width: 250px;
    height: 250px;
  }

  .box_11 {
    background-color: rgba(0, 0, 0, 0.8);
    height: 500px;
    width: 500px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .group_8 {
    background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/83789494fd8e4d0abe22f2ca527fdcc1_mergeImage.png);
    height: 250px;
    border: 2px solid;
    width: 250px;
  }

  .block_5 {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 1);
    width: 250px;
    height: 250px;
    border: 1px solid;
  }

  .text-wrapper_3 {
    width: 72px;
    height: 25px;
    margin: 24px 0 169px 458px;
  }

  .text_12 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
  }

  .text_13 {
    width: 216px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    letter-spacing: 2.545454502105713px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin: 29px 0 0 410px;
  }

  .box_12 {
    width: 98px;
    height: 1px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1fcc0c2bbe0358f7b703d548671a8664cebf7d5776b79468f9396b6e70b8b42f)
    100% no-repeat;
    background-size: 100% 100%;
    margin: 8px 0 24px 469px;
  }

  .block_6 {
    background-color: rgba(26, 26, 26, 1);
    border-radius: 8px 8px 0px 0px;
    width: 470px;
    height: 994px;
    margin-left: 24px;
    justify-content: flex-center;
  }

  .text-wrapper_4 {
    width: 184px;
    height: 30px;
    margin: 24px 0 0 24px;
  }

  .text_14 {
    width: 66px;
    height: 30px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 22px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .text_15 {
    width: 88px;
    height: 30px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 22px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .image_5 {
    width: 422px;
    height: 4px;
    margin: 10px 0 0 24px;
  }

  .block_7 {
    background-color: rgba(51, 51, 51, 1);
    border-radius: 8px;
    width: 422px;
    height: 180px;
    justify-content: flex-center;
    margin: 24px 0 0 24px;
  }

  .text_16 {
    width: 390px;
    height: 50px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    line-height: 25px;
    margin: 16px 0 0 16px;
  }

  .label_2 {
    width: 22px;
    height: 22px;
    margin: 76px 0 16px 384px;
  }

  .text-wrapper_5 {
    width: 422px;
    height: 25px;
    margin: 16px 0 0 24px;
  }

  .text_17 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
  }

  .text_18 {
    background-image: linear-gradient(
      90deg,
      rgba(40, 23, 109, 1) 0,
      rgba(252, 58, 100, 1) 100%
    );
    width: 48px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(54, 208, 182, 1);
    font-size: 12px;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 17px;
    margin-top: 6px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .block_8 {
    width: 422px;
    height: 80px;
    margin: 8px 0 0 24px;
  }

  .box_13 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    border: 1px solid;
    width: 100px;
  }

  .text-wrapper_6 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0e03ddcae470900c97d64e6db73bdd2c982f95b5459c40d67648b112bb8aed63)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_19 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .box_14 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_7 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng358092dd1a0fcafc17fb92e58bed94efd944e1e29769a4be55d4d72f5e39f70f)
    100% no-repeat;
    background-size: 100% 100%;
    width: 101px;
  }

  .text_20 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .box_15 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 8px;
    width: 100px;
  }

  .text-wrapper_8 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4552530ccf012fdbdd7ffe6b388f0a379336e9acc32cd791ab5cceb7db38dce2)
    100% no-repeat;
    background-size: 100% 100%;
    margin-left: -1px;
    width: 101px;
  }

  .text_21 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 36px;
  }

  .box_16 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_9 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng097acab6e4781f4c478cf066ab2e3d73e5401749381254a95c76c2b414f8284c)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_22 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .text-wrapper_10 {
    width: 422px;
    height: 25px;
    margin: 16px 0 0 24px;
  }

  .text_23 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
  }

  .text_24 {
    background-image: linear-gradient(
      90deg,
      rgba(40, 23, 109, 1) 0,
      rgba(252, 58, 100, 1) 100%
    );
    width: 48px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(54, 208, 182, 1);
    font-size: 12px;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 17px;
    margin-top: 6px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .block_9 {
    width: 422px;
    height: 80px;
    margin: 8px 0 0 24px;
  }

  .section_3 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    border: 1px solid;
    width: 100px;
  }

  .text-wrapper_11 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge98eb9b7a22a5a09953927f3850d07dec5c7671729754b20cc886f2fc24fccea)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_25 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .section_4 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_12 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge5b750e01bf0803dfa4fc384b4e0e402a3b63eb71955cbf3ede98dc6b6d5b283)
    100% no-repeat;
    background-size: 100% 100%;
    width: 101px;
  }

  .text_26 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 30px;
  }

  .section_5 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 8px;
    width: 100px;
  }

  .text-wrapper_13 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge220afff79b7aff4214ceaf05c9d63609a29bb465d9f3958f155787288968329)
    100% no-repeat;
    background-size: 100% 100%;
    margin-left: -1px;
    width: 101px;
  }

  .text_27 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 36px;
  }

  .section_6 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_14 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc3403cc2ed3be7658a2ba0c36d9a1251531d3f62e14e06594621c8c8725fb7a9)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_28 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .text-wrapper_15 {
    width: 422px;
    height: 25px;
    margin: 16px 0 0 24px;
  }

  .text_29 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
  }

  .text_30 {
    background-image: linear-gradient(
      90deg,
      rgba(40, 23, 109, 1) 0,
      rgba(252, 58, 100, 1) 100%
    );
    width: 48px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(54, 208, 182, 1);
    font-size: 12px;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 17px;
    margin-top: 6px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .block_10 {
    width: 422px;
    height: 80px;
    margin: 8px 0 0 24px;
  }

  .group_9 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    border: 1px solid;
    width: 100px;
  }

  .text-wrapper_16 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0b709a3f68bc2ffc31fcfa16463178571cca1678a2b16cc98c9b7debfc8c51b6)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_31 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 60px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 20px;
  }

  .group_10 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_17 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6c1aeac04688dd5307665fa54eee6eabfb8e9014e241f97261bdd17b69a5409c)
    100% no-repeat;
    background-size: 100% 100%;
    width: 101px;
  }

  .text_32 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 60px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 20px;
  }

  .group_11 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 8px;
    width: 100px;
  }

  .text-wrapper_18 {
    height: 100px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc9266543e4df65cf65fcc7cd6b005c2f5f0047a649d8162e1846339dc58128c8)
    0px 10px no-repeat;
    background-size: 101px 80px;
    margin-top: -10px;
    width: 100px;
  }

  .text_33 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 46px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 39px 0 0 28px;
  }

  .group_12 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_19 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeac90212b8138427f64cacc579d89622345ebcc4ecfa2a67ab4ff338e6d6b545)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_34 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .text-wrapper_20 {
    width: 422px;
    height: 25px;
    margin: 16px 0 0 24px;
  }

  .text_35 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
  }

  .text_36 {
    background-image: linear-gradient(
      90deg,
      rgba(40, 23, 109, 1) 0,
      rgba(252, 58, 100, 1) 100%
    );
    width: 48px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(54, 208, 182, 1);
    font-size: 12px;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 17px;
    margin-top: 6px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .block_11 {
    width: 422px;
    height: 80px;
    margin: 8px 0 0 24px;
  }

  .box_17 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    border: 1px solid;
    width: 100px;
  }

  .text-wrapper_21 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngda5e9646641024ac79a3569e1f9f4414488db4bb2fab611114fd5f38b036a5a7)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_37 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .box_18 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_22 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4c4342431c70dd121ba541662f86c45fe06977f09cce2c13c50c3b51fc9006b5)
    100% no-repeat;
    background-size: 100% 100%;
    width: 101px;
  }

  .text_38 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 35px;
  }

  .box_19 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 8px;
    width: 100px;
  }

  .text-wrapper_23 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng916e9afab7e1218b92dcbf364f1a4c14373c8ae12543fc49e52c9d1f418e544f)
    100% no-repeat;
    background-size: 100% 100%;
    margin-left: -1px;
    width: 101px;
  }

  .text_39 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 36px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 33px;
  }

  .box_20 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px;
    height: 80px;
    margin-left: 7px;
    width: 100px;
  }

  .text-wrapper_24 {
    height: 80px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfdc75d899d5ede44dac971b20b9df70d52246fe837725f0e8780130295cfe8ce)
    100% no-repeat;
    background-size: 100% 100%;
    width: 100px;
  }

  .text_40 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    width: 46px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 29px 0 0 27px;
  }

  .block_12 {
    width: 422px;
    height: 37px;
    margin: 16px 0 0 24px;
  }

  .text_41 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 6px;
  }

  .image_6 {
    width: 266px;
    height: 15px;
    margin: 11px 0 0 16px;
  }

  .text-wrapper_25 {
    border-radius: 4px;
    height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 16px;
    width: 52px;
  }

  .text_42 {
    width: 9px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 20px;
    margin: 9px 0 0 22px;
  }

  .block_13 {
    width: 422px;
    height: 37px;
    margin: 16px 0 0 24px;
  }

  .text_43 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 6px;
  }

  .box_21 {
    border-radius: 4px;
    width: 334px;
    height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .text_44 {
    width: 44px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin: 9px 0 0 130px;
  }

  .thumbnail_6 {
    width: 13px;
    height: 7px;
    margin: 15px 16px 0 131px;
  }

  .text-wrapper_26 {
    height: 60px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0736eb49b4beaa0b4d61e5f0c6754da621a8e8d94a0be74f369d55bdd13ba5cc)
    100% no-repeat;
    background-size: 100% 100%;
    width: 422px;
    margin: 16px 0 24px 24px;
  }

  .text_45 {
    width: 40px;
    height: 28px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 28px;
    margin: 16px 0 0 191px;
  }
  .el-textarea__inner {
    color:white !important;
    display: block;
    resize: none !important;
    padding: 5px 15px;
    font-size: 18px !important;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: transparent !important;
    background-image: none;
    border: 0px solid transparent  !important;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .el-input__inner {
    -webkit-appearance: none;
    background-color: transparent !important;
    background-image: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    border: 1px solid #333333 !important;
    text-align: center;
  }
  .el-select-dropdown {
    position: absolute;
    z-index: 1001;
    border: 1px solid transparent !important;
    border-radius: 4px;
    background-color: #313330 !important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 5px 0;
  }
  .el-popper[x-placement^=bottom] .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #313330 !important;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #313330 !important;
  }
  .el-popper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -6px;
    border-top-color: #313330 !important;
    border-bottom-width: 0;
  }
  .el-popper .popper__arrow, .el-popper .popper__arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent !important;
    border-style: solid;
  }
  body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
      Arial, PingFang SC-Light, Microsoft YaHei;
  	 margin:0 auto !important;
  }
  input {
    background-color: transparent;
    border: 0;
  }
  button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
  }
  
  button:active {
    opacity: 0.6;
  }
  .van-nav-bar__left:active,
  .van-nav-bar__right:active {
    opacity: 1;
  }
  [class*='van-']::after {
    border-bottom: 0;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
    display: flex;
    justify-content: flex-start;
  }
  .justify-center {
    display: flex;
    justify-content: center;
  }
  
  .justify-end {
    display: flex;
    justify-content: flex-end;
  }
  .justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  .justify-around {
    display: flex;
    justify-content: space-around;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .align-start {
    display: flex;
    align-items: flex-start;
  }
  .align-center {
    display: flex;
    align-items: center;
  }
  .align-end {
    display: flex;
    align-items: flex-end;
  }
</style>
